<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.go(-1)" />
    <!-- 中间内容区域 -->
    <div class="txt">
      <h1>{{ text.title }}</h1>
      <!-- 详情页头部 -->
      <div class="thead">
        <div class="info">
          <van-image
            round
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="heima">
            <p>黑马先锋</p>
            <span>{{ text.pubdate | relvTime }}</span>
          </div>
          <van-button round type="info">+关注</van-button>
        </div>
      </div>
      <!-- 中间的文章内容 -->
      <div ref="text" class="text"></div>
      <!-- 分割线 -->
      <van-divider>end</van-divider>
      <!-- 两个按钮 -->
      <div class="btnbox">
        <van-button class="left" plain round icon="good-job-o" type="info">
          点赞
        </van-button>
        <van-button class="rigth" plain round icon="delete-o" type="info">
          不喜欢
        </van-button>
      </div>
      <!-- 评论栏 -->
      <div class="box1">
        <ping-lun></ping-lun>
      </div>
    </div>
    <!-- 底部评论搜索栏栏 -->
    <!-- <van-field v-model="sms" center clearable placeholder="请输入评论内容">
      <template #button>
        <van-button @click="send" size="small" type="primary">发布</van-button>
      </template>
    </van-field> -->
  </div>
</template>

<script>
import { detailsApi } from '@/Api'
import PingLun from './pinglun.vue'

export default {
  components: {
    'ping-lun': PingLun
  },
  data () {
    return {
      article: '',
      text: {}
    }
  },
  async created () {
    this.article = this.$route.query.article_id
    let res = await detailsApi(this.article)
    // console.log('res', res)
    this.text = res.data.data
    this.$refs.text.innerHTML = res.data.data.content
  },
  methods: {
    onClickLeft () {
      this.$router.push('/layout/home')
    }
  }
}
</script>

<style lang="less" scoped>
// 导航栏样式
.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}

// 中间的内容区
.txt {
  ::v-deep .text {
    pre {
      background-color: #000;
      color: #fff;
      overflow: auto;
      code {
        font-size: 12px;
      }
    }
  }
  padding: 46px 20px 0 20px;
  // height: 1000px;

  top: 46px;
  bottom: 54px;
  // word-break: break-all;
  overflow: auto;
  overflow-x: hidden;
  ::v-deep .text {
    p {
      font-size: 12px;
      color: #818387;
      font-weight: normal;
    }
    h3 {
      font-weight: normal;
      color: #333333;
    }
  }
}
// 头部
.thead {
  h1 {
    padding: 5px 0;
    font-size: 22px;
  }
  margin-bottom: 20px;
}
// 头部
.info {
  display: flex;
  position: relative;
  align-items: center;
  margin: 10px 0;
  height: 80px;
  width: 100%;
  .van-button {
    position: absolute;
    right: 0;
    .van-button__text {
      font-size: 14px;
    }
  }
  .van-image {
    width: 70px;
    height: 70px;
  }
  .heima {
    margin-left: 10px;
    p {
      font-size: 12px;
    }
    span {
      font-size: 14px;
      color: #808080;
    }
  }
}
// 评论区的点赞按钮
.btnbox {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
  .left {
    border: 1px solid greenyellow;
    color: greenyellow;
  }
  .right {
    border: 1px solid red;
    color: red;
  }
}
.box1 {
  height: 200px;
}
</style>
